
<!DOCTYPE html> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />

	<title>Photopea - The Structure</title>

	<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" />
</head>

<body>
<div id="page">
	<div id="header"> 
		<a href="index.html" class="title">Learn Photopea</a> 
		<!--<p>Web-based image editor.</p>-->
		<a href="https://blog.photopea.com">Blog</a> |
		<a class="curr" href="index.html">Learn</a> |
		<a href="../tuts/index.html">Tutorials</a> |
		<a href="../api/index.html">API</a> |
		<a href="https://www.facebook.com/photopea">Facebook</a> |
		<a href="https://www.twitter.com/photopeacom">Twitter</a> 
	</div>	
	<div id="main" style="max-width:1000px;">
		<div id="sidebar" style="width:22%;">
			<h3>Topics</h3>
			<ul>
			<li class="lvl0"><a href="index.html">Introduction</a></li>
			<li class="lvl0"><a href="workspace.html">Workspace</a></li>
			<li class="lvl1"><a href="opening-saving.html">Open and Save</a></li>
			<li class="lvl1"><a href="navigation.html">Navigation</a></li>
			<li class="lvl1"><a href="image-size.html">Image size</a></li>
			<li class="lvl0"><a href="layers.html">Layers</a></li>
			<li class="lvl1"><a href="masks.html">Masks</a></li>
			<li class="lvl1"><a href="layer-styles.html">Layer Styles</a></li>
			<li class="lvl1"><a href="smart-objects.html">Smart Objects</a></li>
			<li class="lvl1"><a href="other-layers.html">Other Layers</a></li>
			<li class="lvl0"><a href="layer-manipulation.html">Layer Editing</a></li>
			<li class="lvl1"><a href="free-transform.html">Free Transform</a></li>
			<li class="lvl1"><a href="adjustments-filters.html">Adjust. &amp; Filters</a></li>
			<li class="lvl0"><a href="selections.html">Selections</a></li>
			<li class="lvl1"><a href="creating-selections.html">Make Selections</a></li>
			<li class="lvl1"><a href="advanced-selecting.html">Advanced Selecting</a></li>
			<li class="lvl1"><a href="refine-edge.html">Refine Edge</a></li>
			<li class="lvl1"><a href="moving-selected-data.html">Move Selected Data</a></li>
			<li class="lvl0"><a href="brush-tools.html">Brush Tools</a></li>
			<li class="lvl1"><a href="bt-basic.html">Basic Tools</a></li>
			<li class="lvl1"><a href="bt-advanced.html">Advanced Tools</a></li>
			<li class="lvl1"><a href="bt-smart.html">Smart Tools</a></li>
			<li class="lvl0"><a href="text.html">Text</a></li>
			<li class="lvl1"><a href="text-style.html">Text Style</a></li>
			<li class="lvl0"><a href="vector-graphics.html">Vector Graphics</a></li>
			<li class="lvl1 active"><a href="vg-structure.html">The Structure</a></li>
			<li class="lvl1"><a href="vg-manipulation.html">Editing Shapes</a></li>
			<li class="lvl1"><a href="vg-creating.html">Creating Shapes</a></li>
			<li class="lvl0"><a href="other.html">Other</a></li>
			<li class="lvl1"><a href="guides-grid-snapping.html">Guides &amp; Snapping</a></li>
			<li class="lvl1"><a href="animations.html">Animations</a></li>
			<li class="lvl1"><a href="layer-comps.html">Layer Comps</a></li>
			<li class="lvl1"><a href="scripts.html">Scripts</a></li>
			</ul>
		</div>
		<div id="content" style="width:78%;">
			<div class="post">			

<h1>The structure</h1>

<p>The content of a vector mask (or a shape layer) is called a <b>Shape</b>. The Shape consists of several <b>Paths</b>. 
A Path consists of multiple <b>Knots</b>. Each knot consists of three points: the <b>anchor</b> and two <b>handles</b>.</p>

<p>Here we see a shape consisting of four paths. The path on the right consists of five knots. The knot consists of an anchor (in the middle) and two handles.</p>
<img class="fullw" src="https://i.imgur.com/Ojp1HRL.png" />

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-layout="in-article"
     data-ad-format="fluid"
     data-ad-client="ca-pub-0885095539348241"
     data-ad-slot="5352893134"></ins>
<script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
<h2>Path</h2>

<p>There can be several paths within a shape. Paths have a fixed order (the first, the second, the third ...). 
Each path has some <b>boolean operation</b>, which defines, how the path (e.g. the fourth path) is combined with the content under it (i.e. paths 1, 2 and 3).
Boolean operations are <b>Union</b>, <b>Subtract</b>, <b>Intersect</b> and <b>Exclude</b>.</p>

<p>Here we see four shapes with two paths in each shape. The second path (the ellipse) has different boolean operations.</p>
<img class="fullw" src="https://i.imgur.com/aNkQlWi.png" />

<p>When all paths have the Union operation, their order is not important. But e.g. when some path has a Subtract operation, reordering paths may produce a different result.</p>

<p>Paths can be open or closed. Open path means, that the first and the last knot are connected with a straight line (ignoring the adjacent handles).</p>

<h2>Knots</h2>

<p>A path consists of a sequence of knots. Each two consecutive knots are connected with a curve segment, that is shaped by adjacent handles. 
A knot can be <b>linked</b> (both handles are located in a line with the anchor) or <b>unlinked</b> (handles have arbitrary locations). 
A linked knot guarantees the smooth curve, while an unlinked knot usually creates a corner.</p>

<p>A linked knot is visualised with a circle anchor, while an unlinked one has a square anchor.</p>

<img src="https://i.imgur.com/Ohv874p.png" />

<p>The handle of the knot is <b>collapsed</b>, when it is located at the location of the anchor point. 
When all knots in a path have collapsed handles, then the path consists only of straight line segments (i.e. it is a polygon).</p>

<h2>The Look</h2>

<p>We have described the logical structure of vector graphics and the meaning of each part. 
But we usually want our shapes to be filled with a specific color, or stroked with a thick line.</p>

<p>While vector masks simply hide the portion of a layer, Shape Layers have more interesting properties. 
Each Shape Layer has a Fill and a Stroke value. Fill and Stroke can have one of four values: <b>None, Color, Gradient and Pattern</b>.
Combine different values of Fill and Stroke to create various styles. Have a look at possible combinations.</p>

<img class="fullw" src="https://i.imgur.com/G0pYcNo.png" />

<p>Stroke can have many parameters: Line thickness, position: Inside, Center, Outside, corner shape, gaps (dashed line) etc.
When your shape contains just a single open path, the first and the last knot will not be connected inside a stroke.</p>


			
			</div>
			
			<h2 style="margin-top: 4em">Comments</h2>
			<div id="disqus_thread"></div>
			<script>   
			(function() { // DON'T EDIT BELOW THIS LINE
			var d = document, s = d.createElement('script');
			s.src = 'https://learn-photopea.disqus.com/embed.js';
			s.setAttribute('data-timestamp', +new Date());
			(d.head || d.body).appendChild(s);
			})();   
			</script>	
		</div>
	</div>
	<div id="footer">&copy; 2013-2018 support@photopea.com</div>
	<script>
	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

	  ga('create', 'UA-4249565-43', 'auto');  ga('send', 'pageview');
	</script>
</div>
</html>
